/* 隐藏默认的背景设置 */
#chat-room {
  padding: 20px;
}
footer {
  visibility: hidden;
}
/* 用户消息样式 */
.user-message {
  background-color: #9eea6a;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  max-width: 70%;
  align-self: flex-end;
}

/* 机器人消息样式 */
.bot-message {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  max-width: 70%;
  align-self: flex-start;
}

/* 输入框样式 */
#input-box {
  border-radius: 20px;
}

/* 发送按钮样式 */
#send-btn {
  background-color: #ed7720;
  color: white;
  border-radius: 20px;
}

/* 设置背景图片容器的样式 */
#background-image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 新增背景图片样式 */
#background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}

/* 确保聊天内容在前景 */
#chat-room {
  background: no-repeat center center fixed;
  background-size: cover;
  /* 删除下面无效的注释行 */
}
/* 确保聊天内容在前景 */
#background-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#chat-room .button-icon {
  width: 20vw; /* 宽度为父元素的30% */
  height: auto; /* 高度自动，根据宽度按比例缩放 */
  position: absolute; /* 使用绝对定位 */
  left: 0; /* 吸附在父元素左边框 */
}
.redio-button {
  width: 300px;
}
